<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/pop.css" />
	</head>

	<style>
		.mui-row.mui-fullscreen > [class*="mui-col-"] {
			height: 100%;
		}
		.mui-col-xs-3, .mui-control-content {
			overflow-y: auto;
			height: 100%;
		}
		.mui-segmented-control .mui-control-item {
			line-height: 50px;
			width: 100%;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			background-color: #fff;
		}
		.mui-popover .mui-table-view{
			max-height: none;
		}
	</style>

	<body>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试弹出</h1>
		</header>
		<div class="mui-content">
			<!--<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block" onclick="ff()">打开弹出菜单</a>-->
			<div class="nav">
				<a href="#popover1" class="nava" >区域</a>
				<a class="split"></a>
				<a href="#popover2" class="nava">排序</a>
				<a class="split"></a>
				<a href="#popover3" class="nava">价格区间</a>
				<a class="split"></a>
				<a href="#popover4" class="nava">标签</a>
			</div>
			<!--弹出框-->
			<!--区域-->
			<div id="popover1" class="mui-popover">
				<div class="tabList mui-row mui-fullscreen">
					<div class="mui-col-xs-3">
						<div class="mui-scroll-wrapper scroll">
							<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							</div>
						</div>
					</div>
					<div class="mui-col-xs-9">
						<div class="mui-scroll-wrapper scroll">
							<div id="segmentedControlContents" style="border-left: 1px solid #c8c7cc;">
								<div id="item1" class="mui-control-content mui-active">
								</div>
								<div id="item2" class="mui-control-content">
								</div>
								<div id="item3" class="mui-control-content">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--排序-->
			<div id="popover2" class="mui-popover">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#">排序1</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#">排序2</a>
					</li>
				</ul>
			</div>
			<!--价格区间-->
			<div id="popover3" class="mui-popover">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#">价格区间1</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#">价格区间2</a>
					</li>
				</ul>
			</div>
			<!--标签-->
			<div id="popover5" class="mui-popover">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#">标签1123</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#">标签2234</a>
					</li>
				</ul>
			</div>
			<!--//-->
			<div id="popover4" class="mui-popover">

				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#">标签1</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#">标签2</a>
					</li>
				</ul>
			</div>
			<!--<button id="dakai" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>-->
		</div>
		<script type="text/javascript">
			mui('.scroll').scroll();

			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var leftList = [];
			var rightList = [];

			var i = 1,
				j = 1,
				m = 12, //左侧选项卡数量+1
				n = 9; //每个选项卡列表数量+1
			for(i = 1; i < m; i++) {
				leftList.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
			}
			controls.innerHTML = leftList.join('');
			
			for(i = 1; i < m; i++) {
				rightList.push('<div id="content' + i + '" class="mui-control-content">' +
					'<ul class="mui-table-view">');
				for(j = 1; j < n; j++) {
					rightList.push('<li class="mui-table-view-cell">第' + i + '路段-' + j + '</li>');
				}
				rightList.push('</ul></div>');
			}
			contents.innerHTML = rightList.join('');

			//默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
			contents.querySelector('.mui-control-content').classList.add('mui-active');

			/*document.getElementById('dakai').addEventListener('tap', function() {
				mui.openWindow({
					url: 'scroll-x.html',
					id: 'scroll-x',
					extras: {
						//自定义扩展参数，可以用来处理页面间传值
						hotelName: name
					}
				});
			});*/
		</script>
	</body>

</html>